<template>
  <view class="navTop">
    <van-nav-bar title="糖果钱包" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>

    <div class="pic">
      <span>可用糖果</span>
      <p>5483.00</p>
    </div>
    <div class="line"></div>
    <div class="jilv">
      <h2>
        <img src="@/static/icon/jl.png">兑换记录
      </h2>
      <ul>
        <li>
          <div class="left">
            <span>积分兑换DDM</span>
            <p>2018/11/25 13:24</p>
          </div>
          <div class="right">
            <span class="blue">-1000.00积分</span>
          </div>
        </li>
        <li>
          <div class="left">
            <span>积分兑换DDM</span>
            <p>2018/11/25 13:24</p>
          </div>
          <div class="right">
            <span class="orange">+1000.00积分</span>
          </div>
        </li>
      </ul>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onClickRight() {
      uni.navigateTo({
        url: "../register/register"
      });
    }
  }
};
</script>

<style lang="less">
.pic {
  width: 100%;
  height: 335upx;
  background: url("~@/static/personalCenter/pic.png");
  background-size: 100% 100%;
  padding-top: 84upx;
  text-align: left;
  color: #3c1e0d;
  padding-left: 68upx;
  box-sizing: border-box;
  position: relative;
  .jifen {
    position: absolute;
    right: 30upx;
    top: 74upx;
    height: 43upx;
    line-height: 43upx;
    width: 120upx;
    text-align: center;
    background: #fff;
    font-size: 22upx;
    border-radius: 43upx 0 0 43upx;
  }
  p {
    font-size: 72upx;
    margin-top: 20upx;
  }
  span {
    font-size: 28upx;
  }
}
.jilv {
  margin-top: 50upx;
  h2 {
    padding-left: 25upx;
    font-size: 30upx;
    color: #000;
    line-height: 60upx;
    font-weight: bold;
    border-bottom: 1upx solid #f0f0f0;
    img {
      width: 28upx;
      height: 31upx;
      margin-right: 12upx;
    }
  }
  ul {
    padding: 0 25upx;
  }
  li {
    width: 100%;
    display: inline-block;
    line-height: 88upx;
    border-bottom: 1upx solid #f0f0f0;
    .left {
      float: left;
      line-height: 30upx;
      padding-top: 15upx;
      span {
        font-size: 24upx;
        font-weight: bold;
        color: #767676;
      }
      p {
        font-size: 20upx;
        font-weight: bold;
        color: #b8b8b8;
      }
    }
    .right {
      float: right;
      line-height: 88upx;
    }
  }
}
</style>
